<!DOCTYPE html>
<html ng-app='TweetSearch'>
    <head>
        <link rel="icon" type="image/png" href="../../artwork/favicon.png">
        <title>Compare User Profile Page</title>
        <link href="/css/loklak.css" rel="stylesheet">
        <script src="/js/jquery.min.js"></script>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css">
        <script src="../../js/angular.min.js"></script>
        <script src="../../js/angular-route.min.js"></script>
        <script src="../../js/loklak.js"></script>
        <link href="css/style.css" rel="stylesheet"/>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="/js/angular.min.js"></script>
        <script src="./script.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed"
                        data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://loklak.org">
                        <img src="/images/loklak_org.png" height="24" style="float:left;">
                    </a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                    </ul>
                </div>
            </div>
        </nav>
        <center>
            <h1>Compare Twitter profiles</h1>
            <div ng-app="TweetSearch" ng-controller="Controller" class="form-group">
                <div class="input-group" id="searchBar">
                    <table>
                        <tr>
                            <td><input type="text" id="query" ng-model="query"
                                placeholder="Enter User 1" class="form-control"
                                ng-init="query = ''"
                                ng-keyup="$event.keyCode == 13 && query1 != '' && query != '' ? Search() : null">
                            </td>
                            <td><input type="text" id="query1" ng-model="query1"
                                placeholder="Enter User 2" class="form-control"
                                ng-init="query1 = ''"
                                ng-keyup="$event.keyCode == 13 && query1 != '' && query != '' ? Search() : null">
                            </td>
                        </tr>
                    </table>
                    <span class="input-group-btn">
                        <button href='#' class="btn btn-default"
                            type="button" id="button"
                            ng-click="query != '' && query != '' ? Search() : null">Compare
                        </button>
                    </span>
                </div>
            </div>
            <br>
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div id="contactCard">
                            <div class="panel panel-default">
                                <div class="panel-heading clearfix">
                                    <h3 class="panel-title pull-left">User 1 Profile</h3>
                                </div>
                                <div class="list-group">
                                    <div class="list-group-item">
                                        <img src="{{userData1.profile_image_url}}" alt="" style="pull-left">
                                        <h4 class="list-group-item-heading">{{userData.name}}</h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.description}}</strong> Description
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.followers_count}}</strong> Followers
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.friends_count}}</strong> Following
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.statuses_count}}</strong> Statuses
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.favourites_count}}</strong> Favourites
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.created_at}}</strong> Created On
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData.location}}</strong> Location
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <small>{{userData.screen_name}}</small>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div id="contactCard">
                            <div class="panel panel-default">
                                <div class="panel-heading clearfix">
                                    <h3 class="panel-title pull-left">User 2 Profile</h3>
                                </div>
                                <div class="list-group">
                                    <div class="list-group-item">
                                        <img src="{{userData1.profile_image_url}}" alt="" style="pull-left">
                                        <h4 class="list-group-item-heading">{{userData1.name}}</h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.description}}</strong> Description
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.followers_count}}</strong> Followers
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.friends_count}}</strong> Following
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.statuses_count}}</strong> Statuses
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.favourites_count}}</strong> Favourites
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.created_at}}</strong> Created On
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <strong>{{userData1.location}}</strong> Location
                                        </h4>
                                    </div>
                                    <div class="list-group-item">
                                        <h4 class="list-group-item-heading">
                                            <small>{{userData1.screen_name}}</small>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </center>
    </body>
</html>
